<template>
	<view class="details-page">
		<!-- 导航 -->
		<block v-if="isFixed">
			<CustomNavbar :iconFlag="iconFlag" :navTitle="navTitle" :isFixed="isFixed" />
		</block>

		<!-- 内容区域 -->
		<view class="content-box">
			<up-swiper :list="detailsData.bannerSrc" previousMargin="30" nextMargin="30" circular :autoplay="false"
				radius="5" bgColor="#ffffff"></up-swiper>

			<view class="title">景区名: {{ detailsData.title }}</view>
			<view class="type">类型: {{ detailsData.type }}</view>
			<view class="location">地点: {{ detailsData.location }}</view>
			<view class="favorable-comment">
				<view class="left-box">
					<text style="font-size: 28rpx; font-weight: 700;">评分：</text>
					<up-icon name="star-fill" color="#fd6200" size="18" />
					<view class="favorable-comment-number">{{ detailsData.favorableComment }}</view>
					<view class="favorable-comment-text">
						{{ detailsData.favorableComment >= 4? '很好' : detailsData.favorableComment >= 3? '好' : '一般' }}
					</view>
				</view>
				<view class="right-totalComments">
					<text>评论：</text>
					<u-icon size="22px" color="#fd6200" name="chat-fill" @click="handleComment" />
					<text style="margin-left: 12rpx;">{{ detailsData.totalComments }}</text>
				</view>
			</view>
			<view class="status-and-collectsStatus">
				<view class="status">是否收费：{{ statusEnum[detailsData.status] }}</view>
				<view class="collectsStatus">是否收藏：{{ detailsData.collectsStatus? '已收藏' : '未收藏' }}</view>
			</view>
			<view class="author">发布作者：{{ detailsData.author }}</view>
			
			<!-- 游玩指南 -->
			<view class="game-guide-title">游玩指南</view>
			<view class="game-guide-list">
				<view class="one-row-two-box">
					<block v-for="item in detailsData.gameGuideList" :key="item">
						<view class="img-box">
							<image mode="widthFix" class="imgs" :src="item.src" />
							<view class="tag-text">{{ item.tag }}</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<!-- 评论弹窗 -->
		<PopupVue :popupShow="popupShow" @closeCB="popupShow = false" />
	</view>
</template>

<script setup lang="ts">
	import CustomNavbar from '../../components/customNavbar.vue';
	import PopupVue from '../popupComponents/index.vue';
	import { ref, reactive } from 'vue';

	// 引入组件
	components: {
		CustomNavbar;
		PopupVue
	};

	const props : any = defineProps({
		title: String,
		id: String || Number
	});
	
	// 弹窗状态
	const popupShow = ref(false)

	// 自定义导航是否通栏显示
	const isFixed = ref(true)
	// 导航标题
	const navTitle = ref(props.title || '文旅')
	// 返回图标是否展示
	const iconFlag = ref(true)
	const statusEnum = ['免费', '收费']
	// 详情数据
	const detailsData = ref({
		bannerSrc: [
			'https://imgessl.kugou.com/stdmusic/240/20240326/20240326151433974976.jpg',
			'https://www.cosplayla.com/picup/cospic/202402/10495_17087837077860_200.jpg',
			'https://imgessl.kugou.com/stdmusic/240/20240326/20240326151433974976.jpg',
		],
		title: '青城山',
		type: '景区',
		location: '成都',
		favorableComment: 4,
		totalComments: 75, // 总评论数
		status: 0, // 收费状态
		collectsStatus: true, // 收藏状态
		author: '守时先生',
		gameGuideList: [
			{
				tag: '爬山',
				src: 'https://imgessl.kugou.com/stdmusic/240/20240326/20240326151433974976.jpg'
			},
			{
				tag: '美食',
				src: 'https://imgessl.kugou.com/stdmusic/240/20240326/20240326151433974976.jpg'
			},
			{
				tag: '拍摄',
				src: 'https://imgessl.kugou.com/stdmusic/240/20240326/20240326151433974976.jpg'
			},
			{
				tag: '景点',
				src: 'https://imgessl.kugou.com/stdmusic/240/20240326/20240326151433974976.jpg'
			},
			{
				tag: '项目',
				src: 'https://imgessl.kugou.com/stdmusic/240/20240326/20240326151433974976.jpg'
			},
			{
				tag: '景区',
				src: 'https://imgessl.kugou.com/stdmusic/240/20240326/20240326151433974976.jpg'
			},
		]
	})
	
	// 点击评论
	const handleComment = () => {
		popupShow.value = true
	}
</script>

<style lang="scss" scoped>
	.details-page {
		width: 100%;
		height: 100%;
		overflow: hidden;

		.content-box {
			width: 100%;
			height: calc(100vh - 120rpx);
			margin-top: 142rpx;
			background-color: #fff;
			overflow: auto;

			.title,
			.type,
			.location {
				width: 100%;
				padding: 0 24rpx;
				box-sizing: border-box;
				margin-top: 24rpx;
				font-size: 28rpx;
				font-weight: 700;
			}

			.favorable-comment {
				width: 100%;
				padding: 0 24rpx;
				box-sizing: border-box;
				margin-top: 24rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;


				.left-box {
					display: flex;
					align-items: center;

					.favorable-comment-number {
						margin-left: 6rpx;
						font-size: 26rpx;
						color: #fd6200;
						font-weight: 700;
					}

					.favorable-comment-text {
						margin-left: 12rpx;
						font-size: 24rpx;
						color: #fd6200;
						font-weight: 700;
					}
				}

				.right-totalComments {
					display: flex;
					align-items: center;

					text {
						font-size: 26rpx;
						font-weight: 700;
					}
				}
			}

			.status-and-collectsStatus {
				width: 100%;
				padding: 0 24rpx;
				box-sizing: border-box;
				margin-top: 24rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26rpx;
				font-weight: 700;
			}
			
			.author {
				width: 100%;
				padding: 0 24rpx;
				box-sizing: border-box;
				margin-top: 24rpx;
				width: 100%;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-weight: 700;
			}
			
			.game-guide-title {
				width: 100%;
				padding: 0 24rpx;
				box-sizing: border-box;
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-weight: 700;
				color: red;
			}
			
			.game-guide-list {
				width: 100%;
				padding: 0 24rpx;
				box-sizing: border-box;
				margin-top: 24rpx;
				
				.one-row-two-box {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					
					.img-box {
						width: calc(50% - 12rpx);
						margin-bottom: 24rpx;
						position: relative;
						
						.imgs {
							width: 100%;
							border-radius: 12rpx;
						}
						
						.tag-text {
							position: absolute;
							top: 0;
							left: 0;
							padding: 8rpx 16rpx;
							color: #fff;
							background-color: #000;
							font-size: 24rpx;
							border-radius: 12rpx 0 0 0;
						}
					}
					
				}
			}
			
		}
	}
</style>